<template>
  <div class="">
    <section class="m_wrapper mb54 mt53">
      <!-- nav -->
      <div class="m_index_nav clearfix">
        <router-link class="index_nav_list" tag="a" to="/school" replace
          ><div class="nav_icon nav_huang">
            <svg aria-hidden="true" class="icon_a">
              <use xlink:href="#icon-xueshimao"></use>
            </svg>
          </div>
          <p>院校库</p></router-link
        >
        <router-link class="index_nav_list" tag="a" to="/study"
          ><div class="nav_icon nav_lan">
            <svg aria-hidden="true" class="icon_b">
              <use xlink:href="#icon-shuben"></use>
            </svg>
          </div>
          <p>德语学习</p></router-link
        >
        <router-link class="index_nav_list" tag="a" to="/audit"
          ><div class="nav_icon nav_zi">
            <svg aria-hidden="true" class="icon_c">
              <use xlink:href="#icon-shenhe"></use>
            </svg>
          </div>
          <p>APS审核</p></router-link
        >
        <router-link class="index_nav_list" tag="a" to="/city"
          ><div class="nav_icon nav_hong">
            <svg aria-hidden="true" class="icon_f">
              <use xlink:href="#icon-huodong"></use>
            </svg>
          </div>
          <p>同城活动</p></router-link
        >
        <router-link class="index_nav_list" tag="a" to="/silkbag"
          ><div class="nav_icon nav_hong">
            <svg aria-hidden="true" class="icon_e">
              <use xlink:href="#icon-jinnang"></use>
            </svg>
          </div>
          <p>留德锦囊</p></router-link
        >
        <router-link class="index_nav_list" tag="a" to="/strategy"
          ><div class="nav_icon nav_huang">
            <svg aria-hidden="true" class="icon_g">
              <use xlink:href="#icon-feiji"></use>
            </svg>
          </div>
          <p>留德项目</p></router-link
        >
        <a class="index_nav_list"
          ><div class="nav_icon nav_lan">
            <svg aria-hidden="true" class="icon_d">
              <use xlink:href="#icon-xuexiao"></use>
            </svg>
          </div>
          <p>社区商城</p></a
        >
        <a class="index_nav_list"
          ><div class="nav_icon nav_zi">
            <svg aria-hidden="true" class="icon_h">
              <use xlink:href="#icon-shangcheng"></use>
            </svg>
          </div>
          <p>更多</p></a
        >
      </div>
      <!--nav块-->
      <div class="m_nav_lump clearfix">
        <a class="lunp_item">
          <h1 class="lunp_item_title">每日福利</h1>
          <p class="_txt"></p>
          <span class="lunp_item_icon"
            ><img
              src="../../assets/images/Index_index/m_index_a.png"
              width="100%"
          /></span>
        </a>
        <a class="lunp_item">
          <h1 class="lunp_item_title">留学规划</h1>
          <p class="lunp_item_txt">独家定制</p>
          <span class="lunp_item_icon icon_b">
            <!--<svg aria-hidden="true"><use xlink:href="#icon-xueshimao"></use></svg>-->
            <img
              src="../../assets/images/Index_index/m_index_b.png"
              width="100%"
            />
          </span>
          <label class="hot_txt"
            ><img
              src="../../assets/images/Index_index/m_index_f.png"
              width="100%"
          /></label>
        </a>
        <a class="lunp_item">
          <h1 class="lunp_item_title">语言班</h1>
          <p class="lunp_item_txt">德之甄选</p>
          <span class="lunp_item_icon">
            <img
              src="../../assets/images/Index_index/m_index_c.png"
              width="100%"
            />
          </span>
        </a>
        <a class="lunp_item">
          <h1 class="lunp_item_title">中介机构</h1>
          <p class="lunp_item_txt">口碑精选</p>
          <span class="lunp_item_icon">
            <img
              src="../../assets/images/Index_index/m_index_d.png"
              width="100%"
            />
          </span>
        </a>
        <a class="lunp_item">
          <h1 class="lunp_item_title">VIP会员</h1>
          <p class="lunp_item_txt">尊享特权</p>
          <span class="lunp_item_icon">
            <img
              src="../../assets/images/Index_index/m_index_e.png"
              width="100%"
            />
          </span>
        </a>
      </div>
      <!--nav块结束-->
      <!-- 广告 -->
      <div class="advertising_box">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in bannerlist" :key="item.id">
            <img
              :src="item.cover"
              alt=""
              class="ad_pic"
              @click="goarticledetail(item.id, item.cate)"
            />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 广告 end -->
      <!--中间滑块-->
      <van-tabs
        animated
        swipeable
        title-active-color="#48a5f4"
        color="transparent"
        @click="changetab"
      >
        <van-tab :title="item" v-for="item in title" :key="item">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="pulluprefresh"
          >
            <div v-for="item in articleList" :key="+item.id">
              <div
                class="con_wrap"
                @click="goarticledetail(item.id, item.cate)"
              >
                <div :class="item.cover == '' ? 'div_quan' : 'div_lf'">
                  <div class="con_wrap_titel">{{ item.title }}</div>
                  <div class="con_wrap_desc">
                    {{ item.desc }}
                  </div>
                </div>
                <div class="div_rt" v-if="item.cover !== ''">
                  <img :src="item.cover" alt="" class="con_pic" />
                </div>
                <div class="bot_con">
                  <div class="ban">阅读 {{ item.look }} · {{ item.user }}</div>
                  <span class="mark">{{ item.ban }}</span>
                </div>
              </div>
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
      <!--中间滑块  end-->
    </section>
  </div>
</template>

<script>
import "../../static/css/public_style.css";
import "../../static/css/m_index_style.css";
import "../../static/js/public_icon_new";
import "../../static/js/rem";
import api from "../../utils/api.js";

export default {
  data() {
    return {
      active: 0,
      articleList: [], //文章列表
      cate: "热点",
      bannerlist: "", //广告列表
      title: [
        "热点",
        "新闻",
        "趣闻",
        "德语",
        "审核",
        "留学",
        "生活",
        "职场",
        "视频",
        "其他",
      ],
      num: "",
      loading: false,
      finished: false,
      page: 1,
    };
  },
  computed: {},
  watch: {},
  methods: {
    //活动列表
    getadList() {
      api
        .getAPI(`/ajax/homelunbotu`)
        .then((res) => {
          //数据处理
          this.bannerlist = res.data;
        })
        .catch((err) => console.log(err));
    },
    //文章列表
    getarticleLists(cate) {
      api
        .getAPI(`/ajax/wenzhang/cate/${cate}`)
        .then((res) => {
          //数据处理
          (this.articleList = res.data.data), (this.num = res.data.num);
          console.log(res);
        })
        .catch((err) => console.log(err));
    },
    //切换tab标签
    changetab(name, title) {
      this.getarticleLists(title);
      this.finished = false;
      this.cate = title;
      this.page = 1;
    },
    //文章详情
    goarticledetail(id, cate) {
      this.$router.push({
        path: `/articledetail`,
        query: {
          id: id,
          cate: cate,
        },
      });
    },

    //上拉刷新
    pulluprefresh() {
      var _this = this;
      if (_this.articleList.length !== _this.num) {
        (_this.page = _this.page + 1),
          (_this.loading = true),
          (_this.finished = false);
      } else {
        (_this.loading = false), (_this.finished = true);
      }
      if (_this.loading) {
        setTimeout(function () {
          api
            .getAPI(`/ajax/wenzhang?page=${_this.page}&cate=${_this.cate}`)
            .then((res) => {
              //数据处理
              (_this.articleList = _this.articleList.concat(res.data.data)),
                (_this.loading = false);
            })
            .catch((err) => console.log(err));
        }, 1000);
      }
    },
  },
  created() {},
  mounted() {
    this.getadList();
    this.getarticleLists("热点");
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {},
};
</script>

<style scoped>
.advertising_box {
  margin: 0.15rem 0.15rem 0.08rem 0.15rem;
}
.sliding_con .swiper_box .swiper_box_item .swiper_top .swiper_fr img {
  left: 100%;
}
.m_wrapper >>> .van-tab--active {
  font-weight: bold;
}
.m_wrapper >>> .van-tabs__content--animated {
  border-top: 5px solid #f7f7f7;
}
.m_wrapper >>> .van-tab {
  line-height: 0.3rem;
  font-size: 0.16rem;
  text-align: center;
  color: #666;
}
.sliding_con .swiper_box .swiper_box_item {
  padding: 0.12rem 0.15rem 0.1rem 0.15rem !important;
}
</style>
